<template>
	<view class="fill-blank-container">
		<view class="fill-blank-input-wrapper">
			<input 
				class="fill-blank-input" 
				:class="{
					'input-correct': showAnswer && isCorrect,
					'input-wrong': showAnswer && !isCorrect
				}"
				type="text" 
				v-model="inputValue" 
				placeholder="请输入答案"
				:disabled="showAnswer"
				@input="handleInput"
			/>
		</view>
		
		<!-- 答案状态指示 -->
		<view v-if="showAnswer" class="answer-status">
			<view v-if="isCorrect" class="status-correct">
				<text class="icon-correct">✓</text>
				<text>回答正确</text>
			</view>
			<view v-else class="status-wrong">
				<text class="icon-wrong">✕</text>
				<text>正确答案: {{ answer }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { isAnswerCorrect } from '@/utils/answerValidator';
export default {
	props: {
		userAnswer: {
			type: String,
			default: ''
		},
		answer: {
			type: String,
			default: ''
		},
		showAnswer: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			inputValue: ''
		}
	},
	computed: {
		isCorrect() {
			// 简单比较，可以根据需要调整比较逻辑
			return this.userAnswer.trim().toLowerCase() === this.answer.trim().toLowerCase();
		}
	},
	watch: {
		userAnswer: {
			immediate: true,
			handler(val) {
				this.inputValue = val;
			}
		}
	},
	methods: {
		handleInput() {
			if (this.showAnswer) return;
			this.$emit('update:userAnswer', this.inputValue);
			this.$emit('select', this.inputValue);
		}
	}
}
</script>

<style lang="scss" scoped>
.fill-blank-container {
	margin-top: 30rpx;
}

.fill-blank-input-wrapper {
	padding: 20rpx 0;
}

.fill-blank-input {
	width: 100%;
	height: 80rpx;
	background-color: #f8f8f8;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 30rpx;
	color: #333;
	transition: all 0.3s;
	
	&:focus {
		border-color: #007aff;
		background-color: #fff;
	}
	
	&.input-correct {
		border-color: #4caf50;
		background-color: #e8f5e9;
	}
	
	&.input-wrong {
		border-color: #f44336;
		background-color: #ffebee;
	}
}

.answer-status {
	margin-top: 20rpx;
	padding: 16rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	
	.status-correct {
		display: flex;
		align-items: center;
		color: #4caf50;
		font-size: 28rpx;
		
		.icon-correct {
			margin-right: 10rpx;
		}
	}
	
	.status-wrong {
		display: flex;
		align-items: center;
		color: #f44336;
		font-size: 28rpx;
		
		.icon-wrong {
			margin-right: 10rpx;
		}
	}
}
</style>